/**
 * useEffect 体验
 */
import React, { useEffect } from "react";
import { useState } from "react";

export default function EffectCom() {
  //声明状态
  let [count, setCount] = useState(100);
  let [count2, setCount2] = useState(200);

  //写法一 componentDidMount 与 componentDidUpdate 组合  几乎不用
  // useEffect(() => {
  //   console.log('组件 componentDidMount 与 componentDidUpdate 组合');
  // });

  //写法二 单独模拟 componentDidMount
  useEffect(() => {
    console.log('组件挂载完成');
  }, []);// 第二个参数

  //写法三  单独模拟 componentWillUnmount
  useEffect(() => {
    //返回一个函数
    return () => {  //相当于 componentWillUnmount
      console.log('组件将要卸载');
    }
  }, []);// 第二个参数

  //写法四  单独模拟 componentDidUpdate
  useEffect(() => {
    if(count === 100) return;
    console.log("状态更新啦~~");
  }, [count]);

  //写法五
  useEffect(() => {
    console.log('状态更新啦~~');
  }, [count, count2]);// 数组用来设置: 哪些状态变化之后, 再次执行这个回调

  //声明 handleClick
  let handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>{count}</h2>
      <h2>{count2}</h2>
      <button onClick={handleClick}>新增</button>
      <button
        onClick={() => {
          setCount2(count2 + 1);
        }}
      >
        新增2
      </button>
    </div>
  );
}
